<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
    <!-- Bootstrap CSS from 国内 CDN -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css">

    <!-- jQuery, Popper.js, Bootstrap JS from 国内 CDN -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"></script>

    <script type="text/javascript">
      $(document).ready(function(){
        $("button#jisuan").click(function(){
          var hugao = $('#hugao').val();
          var xianchang = $('#xianchang').val();

          var cal_hubanjing = function (hugao, xianchang){
            var r;
            r = (xianchang * xianchang) / (8 * hugao) + (hugao / 2);
            return r;
          };
          
          var cal_huchang = function (hubanjing, xianchang){
            var huchang;
            var a = Math.asin((xianchang / 2) / hubanjing);
            huchang = (2 * a * hubanjing).toFixed(4);
            return huchang;
          };

          var hubanjing = cal_hubanjing(hugao, xianchang);
          var huchang = cal_huchang(hubanjing, xianchang);
          
          $('#hubanjing').val(hubanjing);
          $('#huchang').val(huchang);
        });
      });
    </script>
    <title>弧长计算</title>
  </head>
  <body>
    <div class="container">
        <div class="row" style="margin-top: 15px;">
          <div class="col-3">
            <button type="button" class="btn btn-outline-primary">弧高</button>
          </div>
          <div class="col-9" >
            <input class="form-control"  id="hugao" type="number" placeholder="请输入弧高">
          </div>
        </div>
        
        <div class="row" style="margin-top: 15px;">
          <div class="col-3">
            <button type="button" class="btn btn-outline-primary">弦长</button>
          </div>
          <div class="col-9">
              <input class="form-control" id="xianchang" type="number" placeholder="请输入弦长">
          </div>
        </div>
  
        <div class="row" style="margin-top: 15px;">
          <div class="col-3">
          </div>
          <div class="col-9">
              <button type="button" id="jisuan" class="btn btn-primary">计算</button>
          </div>
        </div>
  
        <div class="row" style="margin-top: 15px;">
          <div class="col-3">
            <button type="button" class="btn btn-outline-primary">半径</button>          
          </div>
          <div class="col-9">
            <input class="form-control" id="hubanjing" type="text" disabled placeholder="弧半径">
          </div>
        </div>
  
        <div class="row" style="margin-top: 15px;">
          <div class="col-3">
            <button type="button" class="btn btn-outline-primary">弧长</button>                    
          </div>
          <div class="col-9">
            <input class="form-control" id="huchang" type="text" disabled placeholder="弧长">
          </div>
        </div>
  
      </div>
    
  </body>
</html>